<template>
  <view>
    <template v-if="!business">
      <view class="index_hd">
        <!-- 导航栏 -->
        <view class="navigation">
          <image
            style="height: 25px; width: 90px; position: absolute; left: 0"
            src="../../static/image/logo.png"
            mode=""
          ></image>
          <view class="navigation_title"> 商家入驻 </view>
        </view>
      </view>
      <view class="content">
        <view class="checkout_con_bt">
          <view class="checkout_con_remark">
            <view class="checkout_bt_label"> 店铺名称 </view>
            <view class="checkout_bt_input">
              <input
                type="text"
                v-model="info.name"
                placeholder="请输入店铺名称"
                placeholder-class="placeholder"
              />
            </view>
          </view>
        </view>
        <view class="checkout_con_bt">
          <view class="checkout_con_remark">
            <view class="checkout_bt_label"> 联系人 </view>
            <view class="checkout_bt_input">
              <input
                type="text"
                v-model="info.userName"
                placeholder="请输入联系人"
                placeholder-class="placeholder"
              />
            </view>
          </view>
        </view>
        <view class="checkout_con_bt">
          <view class="checkout_con_remark">
            <view class="checkout_bt_label"> 电话 </view>
            <view class="checkout_bt_input">
              <input
                type="text"
                v-model="info.userPhone"
                placeholder="请输入电话"
                placeholder-class="placeholder"
              />
            </view>
          </view>
        </view>
        <view class="checkout_con_bt">
          <view class="checkout_con_remark">
            <view class="checkout_bt_label"> 地址 </view>
            <view class="checkout_bt_input">
              <input
                type="text"
                v-model="info.address"
                placeholder="请输入地址"
                placeholder-class="placeholder"
              />
            </view>
          </view>
        </view>
        <view class="checkout_con_bt">
          <view class="checkout_con_remark">
            <view class="checkout_bt_label">
              <!-- 支付宝账号 -->
              微信二维码
            </view>
            <!-- <view class="checkout_bt_input">
							<input type="text" v-model="info.userCard" placeholder="请输入支付宝账号" placeholder-class="placeholder">
						</view> -->
            <view class="imgUpload" @click="uploadImg(5)">
              <span v-if="!info.userCard">选择照片</span>
              <image
                v-else
                style="height: 60px; width: 60px"
                :src="domain + info.userCard"
                mode=""
              ></image>
            </view>
          </view>
        </view>
        <!-- <view class="checkout_con_bt">
					<view class="checkout_con_remark">
						<view class="checkout_bt_label">
							营业执照
						</view>
						<view class="imgUpload" @click="uploadImg(1)">
							<span v-if="!info.licenseImg">选择照片</span>
							<image v-else style="height: 60px;width: 60px;" :src="domain + info.licenseImg" mode=""></image>
						</view>
					</view>
				</view>
				<view class="checkout_con_bt">
					<view class="checkout_con_remark">
						<view class="checkout_bt_label">
							身份证正面
						</view>
						<view class="imgUpload" @click="uploadImg(2)">
							<span v-if="!info.idcardFrontImg">选择照片</span>
							<image v-else style="height: 60px;width: 60px;" :src="domain + info.idcardFrontImg" mode=""></image>
						</view>
					</view>
				</view>
				<view class="checkout_con_bt">
					<view class="checkout_con_remark">
						<view class="checkout_bt_label">
							身份证反面
						</view>
						<view class="imgUpload" @click="uploadImg(3)">
							<span v-if="!info.idcardBackImg">选择照片</span>
							<image v-else style="height: 60px;width: 60px;" :src="domain +  info.idcardBackImg" mode=""></image>
						</view>
					</view>
				</view> -->
        <view class="checkout_con_bt">
          <view class="checkout_con_remark">
            <view class="checkout_bt_label"> 门头照 </view>
            <view class="imgUpload" @click="uploadImg(4)">
              <span v-if="!info.businessImg">选择照片</span>
              <image
                v-else
                style="height: 60px; width: 60px"
                :src="domain + info.businessImg"
                mode=""
              ></image>
            </view>
          </view>
        </view>
        <view class="pay_btn">
          <button @tap="submit()">提交审核</button>
        </view>
      </view>
    </template>
    <template v-else>
      <template v-if="allowStatus == 1">
        <view class="index_hd">
          <!-- 导航栏 -->
          <view class="navigation">
            <image
              style="height: 25px; width: 90px; position: absolute; left: 0"
              src="../../static/image/logo.png"
              mode=""
            ></image>
            <view class="navigation_title"> 资料审核 </view>
          </view>
        </view>
        <uni-card style="margin-top: 50px" title="审核通知" :is-shadow="true">
          您的资料在审核中， 请耐心等待通知
        </uni-card>
      </template>
      <template v-if="allowStatus == 3">
        <view class="index_hd">
          <!-- 导航栏 -->
          <view class="navigation">
            <image
              style="height: 25px; width: 90px; position: absolute; left: 0"
              src="../../static/image/logo.png"
              mode=""
            ></image>
            <view class="navigation_title"> 资料审核 </view>
          </view>
        </view>
        <uni-card title="审核通知" :is-shadow="true">
          您的资料审核未通过
        </uni-card>
      </template>
      <template v-if="allowStatus == 2">
        <view class="pagenation">
          <image
            style="height: 25px; width: 90px; position: absolute; left: 0"
            src="../../static/image/logo.png"
            mode=""
          ></image>
          <view class="pagenation_title"> 订单 </view>
        </view>

        <view class="tabs">
          <view
            class="tab"
            v-for="(item, index) in tabs"
            :key="index"
            :class="orderStatus === item.status ? 'active' : ''"
            @click="setTab(item.status)"
          >
            {{ item.name }}
            <view class="tab_line"></view>
          </view>
        </view>

        <view class="order_list">
          <view
            class="order_item"
            v-for="(item, index) in orderList"
            :key="index"
          >
            <view class="order_item_hd" @tap="toOrderDetail(item)">
              <!-- 	<view class="order_store_img">
								<image :src="item.storePic" mode="aspectFill"></image>
							</view> -->
              <view class="order_store_info">
                <view class="order_store_name">
                  订单编号：{{ item.orderNumber }}
                </view>
                <view class="order_time">
                  订单时间：{{ item.createTime }}
                </view>
                <view class="order_time"> 金额：{{ item.amount }} </view>
                <view class="order_store_name" v-if="item.business">
                  取餐地址：{{ item.business.address }}
                </view>
                <view v-if="item.address" class="order_store_name">
                  配送信息：
                  <view style="padding-left: 20px">
                    用户：{{ item.address.userName }}
                  </view>
                  <view style="padding-left: 20px">
                    电话：{{ item.address.userPhone }}
                  </view>
                  <view style="padding-left: 20px">
                    地址：{{ item.address.userAddress }}
                  </view>
                </view>
              </view>
              <view class="order_orderStatus">
                {{
                  orderStatus == 1
                    ? "待接单"
                    : orderStatus == 2
                    ? "准备中"
                    : orderStatus == 3
                    ? "待取货"
                    : orderStatus == 4
                    ? "配送中"
                    : "已取餐"
                }}
              </view>
            </view>
            <!-- <view class="order_item_bd" @tap="toOrderDetail(item)">
							<view class="order_goods">
								<view class="order_good" v-for="(item2,index2) in item.list" :key="index2 + 10">
									<view class="order_good_img">
										<image :src="item2.picUrl" mode=""></image>
									</view>
									<view class="order_good_name">
										{{item2.name}}
									</view>
								</view>
							</view>
							<view class="order_other">
								<view class="order_price">
									¥{{item.totalPirce}}
								</view>
								<view class="order_number">
									共{{item.number}}件
								</view>
							</view>
						</view> -->
            <view class="order_item_bt">
              <view
                class="button"
                v-if="orderStatus == 1"
                @tap="takeOrder(item)"
              >
                接单
              </view>
              <view
                class="button"
                v-if="orderStatus == 2"
                @tap="sendOrder(item)"
              >
                出餐
              </view>
              <!-- <view class="order_item_pay" v-if="item.status == 3">
								骑手已取餐
							</view> -->
              <!-- <view class="order_item_pay" v-if="item.orderStatus == 2">
								确认收货
							</view>
							<view class="order_item_pay" v-if="item.orderStatus == 3" @tap="toEvaluate(item)">
								晒单评价
							</view> -->
            </view>
          </view>
          <uni-load-more :status="loadStatus"></uni-load-more>
        </view>

        <view class="mask" v-if="cancelFlag == true"> </view>
        <view class="cancel_mask" v-if="cancelFlag == true">
          <view class="delete_title"> 确定要取消该订单吗？ </view>
          <view class="delete_btns">
            <view class="delete_cancel" @tap="cancelDelete()"> 取消 </view>
            <view class="delete_sure" @tap="sureDelete()"> 确定 </view>
          </view>
        </view>

        <tabBar current="1" v-show="cancelFlag != true"></tabBar>
      </template>
    </template>
  </view>
</template>

<script>
import {
  login,
  getStoreStatus,
  joinUs,
  getStoreOrder,
  takeStoreOrder,
  sendStoreOrder,
} from "../../api/api.js";
import server_url from "../../api/config.js";

export default {
  data() {
    return {
      domain: server_url,
      business: null,
      allowStatus: 2,
      info: {
        name: "",
        userName: "",
        address: "",
        userPhone: "",
        userCard: "",
        licenseImg: "",
        idcardFrontImg: "",
        idcardBackImg: "",
        businessImg: "",
      },

      orderStatus: "1",
      loadStatus: "nomore",
      query: {
        pageNum: 1,
        pageSize: 10,
        status: "",
      },
      tabs: [
        {
          name: "新订单",
          status: "1",
        },
        {
          name: "准备中",
          status: "2",
        },
        {
          name: "待取货",
          status: "3",
        },
        {
          name: "配送中",
          status: "4",
        },
        {
          name: "已取餐",
          status: "5",
        },
      ],
      orderList: [{}],
      cancelFlag: false,
    };
  },
  onPullDownRefresh() {
    this.query.pageNum = 1;
    this.getList();
  },
  //上拉加载更多
  onReachBottom() {
    if (this.query.pageNum < this.pageCount) {
      this.query.pageNum++;
      this.getList();
    }
  },
  methods: {
    takeOrder(item) {
      takeStoreOrder({ orderId: item.id }).then((res) => {
        uni.showToast({
          title: "操作成功",
          icon: "none",
          duration: 2000,
        });
        this.getList();
      });
    },
    sendOrder(item) {
      sendStoreOrder({ orderId: item.id }).then((res) => {
        uni.showToast({
          title: "操作成功",
          icon: "none",
          duration: 2000,
        });
        this.getList();
      });
    },
    submit() {
      // name:'',
      // userName:'',
      // address:'',
      // userPhone:'',
      // userCard:'',
      // businessImg:''
      if (
        !this.info.name ||
        !this.info.userName ||
        !this.info.address ||
        !this.info.userPhone ||
        !this.info.userCard ||
        !this.info.businessImg
      ) {
        uni.showToast({
          title: "请填写完整数据！",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      joinUs(this.info).then((res) => {
        uni.showToast({
          title: "提交成功，请等待审核",
          icon: "none",
          duration: 2000,
        });
        this.allowStatus = 1;
        this.business = this.info;
      });
    },
    uploadImg(index) {
      // 示例代码
      uni.chooseImage({
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          uni.showLoading();
          uni.uploadFile({
            url: this.domain + "/api/common/upload",
            filePath: tempFilePaths[0],
            name: "file",
            // formData: {
            // 	'user': 'test'
            // },
            header: {
              token: uni.getStorageSync("token"),
            },
            success: (uploadFileRes) => {
              let data = JSON.parse(uploadFileRes.data);
              if (index == 1) {
                this.info.licenseImg = data.fileName;
              }
              if (index == 2) {
                this.info.idcardFrontImg = data.fileName;
              }
              if (index == 3) {
                this.info.idcardBackImg = data.fileName;
              }
              if (index == 4) {
                this.info.businessImg = data.fileName;
              }
              if (index == 5) {
                this.info.userCard = data.fileName;
              }
              uni.hideLoading();
            },
          });
        },
      });
    },
    setTab(status) {
      this.orderStatus = status;
      this.query.pageNum = 1;
      this.getList();
    },
    cancelDelete() {
      this.cancelFlag = false;
    },

    sureDelete() {
      this.cancelFlag = false;
      uni.showToast({
        title: "取消成功",
        icon: "none",
        duration: 2000,
      });
    },

    cancelOrder(item) {
      this.cancelFlag = true;
    },

    toOrderDetail(item) {
      uni.navigateTo({
        url:
          "/pages/order/detail?id=" +
          item.orderNumber +
          "&status=" +
          this.orderStatus +
          "&idd=" +
          item.id,
      });
    },
    toEvaluate(item) {
      uni.navigateTo({
        url: "/pages/order/evaluate",
      });
    },
    getList() {
      this.query.status = this.orderStatus;
      getStoreOrder(this.query).then((res) => {
        if (res.code == 200) {
          this.dataHandle(res);
        }
      });
    },
    dataHandle(res) {
      if (this.query.pageNum == 1) {
        this.orderList = [];
      }
      this.orderList.push(...res.rows);
      this.pageCount = Math.ceil(res.total / 10);
      if (this.query.pageNum >= this.pageCount) {
        this.loadStatus = "nomore";
      } else {
        this.loadStatus = "more";
      }
      uni.stopPullDownRefresh();
    },
    getInit() {
      uni.showLoading({ mask: true });
      let that = this;
      getStoreStatus().then((res) => {
        if (res.data) {
          that.business = res.data;
          that.info = res.data;
          uni.setStorageSync("info", that.info);
          that.allowStatus = res.data.allowStatus;
          if (res.data && res.data.allowStatus == 2) {
            that.getList();
          }
        }
        uni.hideLoading();
      });
      // uni.login({
      //   success(res) {
      //     login({ code: res.code, role: 1 }).then((dd) => {
      //       uni.setStorageSync("token", dd.data);
      //       getStoreStatus().then((res) => {
      //         if (res.data) {
      //           that.business = res.data;
      //           that.info = res.data;
      //           uni.setStorageSync("info", that.info);
      //           that.allowStatus = res.data.allowStatus;
      //           if (res.data && res.data.allowStatus == 2) {
      //             that.getList();
      //           }
      //         }
      //         uni.hideLoading();
      //       });
      //     });
      //   },
      // });
    },
  },
  onLoad() {
    if (uni.getStorageSync("info")) {
      this.info = uni.getStorageSync("info");
      this.business = uni.getStorageSync("info");
      this.allowStatus = this.info.allowStatus;
      if (this.allowStatus == 1) {
        this.getInit();
      } else if (this.allowStatus == 2) {
        this.getList();
      }
    } else {
      this.getInit();
    }
  },
};
</script>

<style lang="scss">
.button {
  width: 168rpx;
  height: 56rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 24rpx;
  background: linear-gradient(
    180deg,
    rgba(255, 141, 26, 1) 12.5%,
    rgba(255, 195, 0, 1) 100%
  );
  border-radius: 8rpx;
  color: #ffffff;
  font-size: 26rpx;
}
.submit_btn {
  position: fixed;
  bottom: 60rpx;
  left: 0;
  width: 100%;
  padding: 0 24rpx;

  button {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 80rpx;
    border: 0;
    color: #fff;
    font-size: 26rpx;
    color: #fff;
    background-color: #2588ff;
  }
}
.content {
  padding: 40rpx 32rpx 180rpx;
  border-radius: 32rpx 32rpx 0 0;
  background-color: #fff;
  margin-top: -270rpx;
}
.index_hd {
  // width: 100%;
  height: 400rpx;
  padding: 70rpx 32rpx 0;
  background: linear-gradient(
    180deg,
    rgba(255, 141, 26, 1) 12.5%,
    rgba(255, 195, 0, 1) 100%
  );

  .navigation {
    position: relative;
    text-align: center;
    color: #fff;
    font-size: 36rpx;
    font-weight: 500;
  }
}
.checkout_con_bt {
  // padding: 10px 32rpx;
  background-color: #fff;
  border-radius: 12rpx;
  margin-top: 24rpx;

  .checkout_con_remark {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 0;
    border-bottom: 1rpx solid #e8e7e7;
  }

  .checkout_con_tableware {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 0;
  }

  .checkout_bt_label {
    color: #2e343a;
    font-weight: 500;
    font-size: 28rpx;
  }

  .checkout_bt_input {
    input {
      text-align: right;
      color: #2e343a;
      font-weight: 500;
      font-size: 28rpx;

      &.placeholder {
        color: #9098a0;
      }
    }
  }
}

page {
  background-color: #f9fbfc;
}

.pagenation {
  padding: 60rpx 24rpx 0;
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(255, 141, 26, 1) 12.5%,
    rgba(255, 195, 0, 1) 100%
  );
  .pagenation_title {
    text-align: center;
    font-size: 36rpx;
    color: #333;
    font-weight: bolder;
  }
}

.tabs {
  padding: 0 24rpx;
  display: flex;
  justify-content: space-between;
  padding-top: 40rpx;

  .tab {
    position: relative;
    color: #666666;
    font-size: 28rpx;
    padding-bottom: 16rpx;

    &.active {
      color: rgba(255, 141, 26, 1);
      font-weight: bolder;

      .tab_line {
        display: block;
      }
    }

    .tab_line {
      display: none;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 4rpx;
      background-color: rgba(255, 141, 26, 1);
    }
  }
}

.order_list {
  margin-top: 30rpx;
  padding: 0 24rpx;
  padding-bottom: 180rpx;

  .order_item {
    background-color: #fff;
    padding: 0 24rpx;
    margin-bottom: 30rpx;

    .order_item_hd {
      position: relative;
      padding: 32rpx 0;
      display: flex;
      align-items: center;

      .order_store_img {
        width: 100rpx;
        height: 100rpx;
        flex-shrink: 0;

        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 8rpx;
        }
      }

      .order_store_info {
        margin-left: 15rpx;

        .order_store_name {
          font-size: 30rpx;
          font-weight: bolder;
          color: #2e343a;
        }

        .order_time {
          margin-top: 6rpx;
          color: #9098a0;
          font-size: 24rpx;
        }
      }

      .order_orderStatus {
        position: absolute;
        right: 0;
        font-size: 28rpx;
        color: #666666;
      }
    }

    .order_item_bd {
      position: relative;

      .order_goods {
        display: flex;

        .order_good {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-right: 10rpx;

          .order_good_img {
            width: 170rpx;
            height: 116rpx;

            image {
              width: 100%;
              height: 100%;
              border-radius: 8rpx;
            }
          }

          .order_good_name {
            color: #666666;
            font-size: 20rpx;
          }
        }
      }

      .order_other {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-80%);
        display: flex;
        flex-direction: column;
        align-items: center;

        .order_price {
          font-size: 32rpx;
          color: #000000;
          font-weight: 500;
        }

        .order_number {
          font-size: 24rpx;
          color: #666666;
        }
      }
    }

    .order_item_bt {
      padding: 32rpx 0;
      display: flex;
      justify-content: flex-end;

      .order_item_cancel {
        width: 156rpx;
        height: 56rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1rpx solid #d8d8d8;
        font-size: 26rpx;
        color: #2e343a;
        border-radius: 5rpx;
      }

      .order_item_pay {
        width: 156rpx;
        height: 56rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #2588ff;
        font-size: 26rpx;
        color: #fff;
        border-radius: 5rpx;
        margin-left: 20rpx;
      }
    }
  }
}

.mask {
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.cancel_mask {
  position: fixed;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 610rpx;
  height: 300rpx;
  background-color: #fff;
  padding-top: 80rpx;
  border-radius: 12rpx;

  .delete_title {
    text-align: center;
    color: #2e343a;
    font-size: 32rpx;
    font-weight: 500;
  }

  .delete_btns {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 96rpx;
    border-top: 1rpx solid #ccc;
    display: flex;

    .delete_cancel {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      height: 96rpx;
      color: #2e343a;
      border-right: 1rpx solid #ccc;
    }

    .delete_sure {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      height: 96rpx;
      color: #2588ff;
    }
  }
}
</style>
